<template>
	<z-paging ref="paging" :refresher-threshold="80" :use-custom-refresher="true" @query="queryList" :list.sync="dataList"
	 :refresher-status.sync="refresherStatus" :loading-more-enabled="false" @refresherTouchmove="refresherTouchmove"
	 :touchmove-propagation-enabled="true" :hide-loading-more-when-no-more-and-inside-of-paging="false">
		<!-- 自定义下拉刷新view，若不设置，则使用z-paging自带的下拉刷新view -->
		<!-- 下拉的区域好像高度是80px -->
		<view slot="refresher" class="refresher">
			<view class="mid">
				<view class="midLine"></view>
				<image src="../../static/music-1.svg" mode="aspectFit" :style="{transform: 'rotate('+ refreshIconRotate +'deg)'}"
				 class="icon"></image>
			</view>
		</view>
		<!-- 设置自定义emptyView组件，非必须。空数据时会自动展示空数据组件，不需要自己处理 -->
		<!-- <empty-view slot="empty"></empty-view> -->
		<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
		<view class="content">
			<slot></slot>
			<!-- <view class="item" v-for="(item,index) in dataList" @click="itemClick(item)">
				<view class="item-title">{{item.title}}</view>
				<view class="item-detail">{{item.detail}}</view>
				<view class="item-line"></view>
			</view> -->
		</view>
	</z-paging>
</template>

<script>
	export default {
		name: 'myscroll',
		data() {
			return {
				isFirstTime: true,
				dataList: [],
				refresherStatus: 0, //下拉刷新的状态: 0-默认状态 1.松手立即刷新 2.刷新中
				refreshIconRotate: 0, //自定义下拉中（箭头）图标实时旋转的角度
				loading: false, //正在加载中
			}
		},
		methods: {
			refresherTouchmove(value) {
				// console.log(value + 'px')
				if (value >= 80) {
					value = 80;
				}
				value = value * (360 / 80); //转成180内旋转的度数
				this.refreshIconRotate = value;
			},
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// console.log(pageNo, pageSize);
				const data = [];
				//第一次、组件初始化时：
				if(this.isFirstTime){
					this.$refs.paging.addData(data);
					this.isFirstTime = false;
					return;
				}
				this.loading = true;
				//子组件通知父组件刷新部分数据，数据刷新后父组件通知子组件刷新完成
				//模仿父组件请求：
				setTimeout(() => {
					this.loading = false;
					this.refreshIconRotate = 0;
					this.$refs.paging.addData(data); //传递数据给z-pading后就能取消加载中状态
				}, 2000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.refresher {
		height: 100%;
		position: relative;

		.mid {
			padding-bottom: 10rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			position: relative;

			.midLine {
				width: 1px;
				height: 600rpx;
				position: absolute;
				bottom: 60rpx;
				left: 50%;
				background-color: $xj-text-normal;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
